<template>
	<view class="category">
		<!-- 搜索 -->
		<!-- #ifdef APP-PLUS -->
		<div class="status-bar" :style="{height:statusBarHeight+'px'}"></div>
		<!-- #endif -->
		<view class="search">
			<search class="search_box"></search>
			<view class="hierarchy" @tap="onswitch">
				<!-- 此处切换二级或三级分类 可根据需求选择一种分类方式 -->
				<text class="iconfont icon-erji" v-if="classLevel == true"
					:style="'font-size: 44upx;color:' + colors"></text>
				<text class="iconfont icon-sanji" v-if="classLevel == false"
					:style="'font-size: 44upx;color:' + colors"></text>
			</view>
		</view>
		<!-- 二级类型的分类菜单 -->
		<!-- hideShow 显示销量与价格筛选条件 -->
		<block v-if="comflag">
			<twostage :colors="colors" :showHeader="showHeader" :bottoms="bottoms" :current="currentTwo"
				:classList="categoryList" v-if="classLevel == true" :hideShow="true" @setTwo="setTwo"></twostage>
		</block>
		<!-- 三级类型的分类菜单 -->
		<threestage :colors="colors" :showHeader="showHeader" :current="currentThere" :classList="categoryList"
			:classData="classData" @setThere="setThere" v-if="classLevel == false"></threestage>
	</view>
</template>

<script>
	var app = getApp();
	import search from "../../commponent/public/search";
	import twostage from "../../commponent/cate/twostage";
	import threestage from "../../commponent/cate/threestage";
	import {
		getUserInfo
	} from '@/utils/auth.js'
	export default {
		data() {
			return {
				bottoms: '100',
				comflag: false, //组件渲染
				three: false,
				showHeader: false, //判断当前终端是APP还是h5
				classLevel: true, //控制显示分类菜单  true：二级分类菜单   false：三级分类菜单
				colors: "",
				current: "",
				scrollTop: "",
				statusBarHeight: 20,
				categoryList: [],
				classData: [{ //三级菜单分类
					name: '奥利奥',
					img: "//img30.360buyimg.com/popshop/jfs/t11845/334/820275483/7333/9f90acff/59f8a38eN8d63b2bc.png"
				}, {
					name: '三只松鼠',
					img: "//img20.360buyimg.com/popshop/jfs/t4702/64/3954700922/7363/12853e7c/5907f2ddN0a96cf54.jpg"
				}, {
					name: '良品铺子',
					img: "//img30.360buyimg.com/popshop/jfs/t3472/26/559250389/5485/27928c27/580da7e0Nb2583823.jpg"
				}, {
					name: '达利园',
					img: "//img20.360buyimg.com/popshop/jfs/t2884/157/722435011/5877/a029e06c/57233313Nbb5585a4.jpg"
				}, {
					name: '稻香村',
					img: "//img30.360buyimg.com/popshop/jfs/t4684/82/3914974292/6978/65085974/5907f2c5N4fbef2f6.jpg"
				}, {
					name: '百草味',
					img: "//img20.360buyimg.com/popshop/jfs/t2887/304/855683637/4953/8cf426e2/572966eeN007d6ad3.jpg"
				}, {
					name: '盼盼',
					img: "//img30.360buyimg.com/popshop/jfs/t2632/87/866057601/8941/50435bf/57296832Nbc33fdaf.jpg"
				}, {
					name: '徐福记',
					img: "//img20.360buyimg.com/popshop/jfs/t27217/50/2596273954/4783/c9a93e75/5c05e719Nd0cb6633.jpg"
				}, ],
				// 二级菜单目录
				dataList: [
				],
				currentTwo: 0,
				currentThere: 0
			};
		},

		components: {
			search,
			twostage,
			threestage
		},
		props: {},
		created() {
			uni.$ajax('data/api.goods/getCate', {
				'Api-Name': 'wap'
			}, 'GET').then((res) => {
				if (res.code == 1) {
					this.categoryList = res.data;
					this.comflag = true

				}
			})
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// #ifdef APP-PLUS
			this.showHeader = true //在APP端对样式进行调整
			this.bottoms = '0' //在APP下 规格弹窗的位置发生变化
			// #endif
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		
		onShow: function() {
			let uid = uni.getStorageSync("uid");
			let phone = uni.getStorageSync("phone");
			if(phone){
				this.$store.dispatch({
					type: 'cartleng',
					uid: uid
				});
			}else{
				uni.hideTabBarRedDot({
					index : 2,
				});
			}	
			this.setData({
				colors: app.globalData.newColor
			});
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			setCurrent(e) {
				//设置tab
				let index = e.currentTarget.dataset.index;
				let items = e.currentTarget.dataset.item;
				let scrollTop = index * 20;

				if (index <= 2) {
					scrollTop = 0;
				}

				this.setData({
					current: index,
					scrollTop: scrollTop
				});
			},
			onswitch() {
				this.setData({
					//当多级分类时启动
					classLevel: !this.classLevel
					// classLevel: this.classLevel
				});
			},
			setThere(item) { //获取选择的三级tab
				console.log(item)
			},
			setTwo(item) { //获取选择的二级tab
				console.log(item)
			}
		}
	};
</script>
<style scoped lang="scss">
	.category {
		background-color: #ffffff;
		position: fixed;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		top: 0;
		bottom: 0;
		z-index: 10;
	}

	.search {
		padding: 10upx 4% 10upx;
		padding-left: 10upx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.search_box {
		width: 90%;
	}

	.hierarchy {
		width: 10%;
		height: 60upx;
		font-size: 32upx;
		text-align: right;
	}
</style>
